<script lang="ts" setup>
// import { ElButton, ElEmpty, ElInfiniteScroll } from 'element-plus';
import { ref, reactive } from 'vue';

const count = ref(0);
const load = () => {
  console.log('======load===');
  count.value += 2;
};

const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
});
</script>

<template>
  <div>
    <el-watermark :font="font" content="你好">
      <ul class="infinite-list" style="overflow: auto" v-infinite-scroll="load">
        <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
      </ul>
    </el-watermark>
    <!-- <ElEmpty description="description" />

    <ElButton>Default</ElButton> -->
  </div>
</template>

<style>
.infinite-list {
  height: 400px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid white;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #333;
  margin: 10px;
  color: #fff;
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>
